Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方

Vue.jsでローディングを表示

Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。

Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。

使い方

まずはVueプロジェクトが作成済みの前提で進めます。

以下のコマンドでインストールします。

$ yarn add vue-loading-template

あとは表示したいViewでモジュールをインポートして使います。

<template>
  <div class="container">
    // 使用
    <vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px' }"></vue-loading>
  </div>
</template>

<script>
// インポート
import { VueLoading } from 'vue-loading-template'
export default {
  name: 'HelloWorld',
  // componentsに登録
  components: {
    VueLoading
  }
}
</script>

これで、以下のようにローディングアニメーションが表示されます。

他にも様々な種類のローディングが表示できます。デモサイトもありますので、こちらもご参照ください。

まとめ

「vue-loading」はローディングをサクッと使いたいときにオススメです。ぜひ使ってみてください。